<template>
    <div class="live">
        <van-nav-bar title="瓜夕夕直播" fixed></van-nav-bar>
        <van-notice-bar
            scrollable 
            left-icon="volume-o"
            text="老铁萌，下午三点，准时开启直播哟！"/>
        <!-- 直播面板 -->
        <div class="livepanel">
            <van-empty v-if="false" description="主人，目前还没有直播哟！" />
            <div v-else class="livelist">
                <ul class="live_ul">
                    <li class="liva_li" :style="{width:w}" @click="studio">
                        <div class="live_msg">
                            <van-image
                                width="100%"
                                height="14rem"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                            <span>点击进入直播间</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 页脚 -->
        <van-tabbar v-model="active" border fixed router>
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item name="live" to="live" icon="video-o" dot>直播</van-tabbar-item>
            <van-tabbar-item to="news" icon='chat-o' badge="5">消息</van-tabbar-item>
            <van-tabbar-item to="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="me" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>


<script>
export default {
    data() {
        return {
            active: "live",
            w:(window.screen.width)/2+'px',
        };
    },
    
    methods: {
        studio(){
            if(!(this.$store.state.islogin)){
                this.$toast.fail("您还没有登录哟！亲");
                return
            }else{
                this.$router.push('/studio')
            }
        },
    },
}
</script>

<style>
.live .van-nav-bar{
    background-color: rgb(86, 206, 132);
}

.live .van-nav-bar__title{
    color: aliceblue;
    font-size: 20px;
}

.live .van-notice-bar{
    position: fixed;
    top:46px;
    left: 0;
    right: 0;
}

.live .livepanel{
    position:fixed;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 55px;
    overflow-y:scroll;
}

.live .livepanel ul{
    width: 100%;
}

.live .livepanel ul li{
    position: relative;
    float: left;
    box-sizing: border-box;
    padding: 0 3px;
    border: 1px solid #ccc
}

.live .livepanel .live_msg span{
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 15%;
    right: 15%;
    color: #d6cdcd;
    font-size: 1.5rem;
    text-align: center;
}
</style>
